<template>
    <div>
      <!-- 为ECharts准备一个定义了宽高的DOM -->
      <div ref="chart" :style="style"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, computed,defineProps} from 'vue'
  import * as echarts from 'echarts'
  
  const { width, height, option } = defineProps({
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    option: {
      type: Object,
      default: () => ({
       xAxis: { // x轴
         data: ['kc001', 'kc002', 'kc003', 'kc004', 'kc005', 'kc006'],
         axisLine:{ //坐标轴相关设置
            lineStyle:{ //轴线
                color:'#fff'
            }
        }
       },
       yAxis: {
        axisLine:{ //坐标轴相关设置
            lineStyle:{ //轴线
                color:'#fff'
            }
        }
       }, // y轴
       grid:{
        left:'2%',
        right:'2%',
        top:'13%',
        bottom:'2%',
        containLabel:true,//区域内是否包含坐标轴的刻度标签
    },
       series: [
         {
           type: 'line', // 图表类型
           data: [10, 20, 30, 40, 50, 60] // 图表数据
         }
       ],
      })
    }
  })
  
  const style = computed(()=>({
    width,height
  }))
  const chart = ref();
  

  onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(chart.value);
    myChart.setOption(option);
    // 自适应
    window.addEventListener('resize',()=>{
        myChart.resize
    })
  })

  </script>